<template>
  <PageLayout full :page-style="pageStyle">
    <template #header>
      <HeaderLayout show-back :header-style="headerStyle">
        <view>{{ $t('ConsumablesService.Navigate.Title.Text') }}</view>
      </HeaderLayout>
    </template>
    <view class="consumables-service">
      <view class="good-box" v-for="(good, index) in goodsList" :key="index" @click="jumpOtherApp(good)">
        <image class="good-img" :src="good.imgPath"></image>
        <view class="good-name">{{ good.name }}</view>
        <view class="good-cont">
          <view class="good-now-price"
            ><text class="icon">¥</text><text class="now-price"> {{ good.discountPrice }}</text></view
          >
          <view class="good-pre-price" v-if="good.discountPrice !== good.price">¥ {{ good.price }}</view>
        </view>
      </view>
    </view>
  </PageLayout>
</template>

<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import { onLoad } from '@dcloudio/uni-app'
import { getAllGoodsData, type GoodsListType } from '@/api/content'
import { jumpMP } from '@/utils/mpHelper'
import { trackEvent, TrackType } from '@/dataReport/tracks'
import { safeTrack } from '@/dataReport/dataReportUtil'
const headerStyle = {
  backgroundColor: '#ffffff',
}
const pageStyle = {
  backgroundColor: '#F4F4F4',
}
const goodsList = ref<GoodsListType[]>([])

onLoad((query: any) => {
  getGoodsDataFun(query?.vib)
})
async function getGoodsDataFun(vib: string) {
  try {
    const res = await getAllGoodsData(vib)
    goodsList.value = res.data
  } catch (error) {}
}
/**
 * 跳转其它小程序
 */
function jumpOtherApp(good: GoodsListType) {
  safeTrack(() => {
    trackEvent(
      'check_product_actionhandler',
      {
        landing_path: good.goodsDetailsLink,
        mp_app_id: good.appId,
        product_name: good.name,
        product_id: good.goodsDetailsLink.split('?')[1].split('=')[1],
      },
      TrackType.ApplianceDetail,
      'Appliance.Detail.ConsumablesService.Select'
    )
  })
  if (good.appId) {
    jumpMP(good.appId, good.goodsDetailsLink, {}, 'Appliance.Detail.ConsumablesService.Select.ToBuy')
  }
}
</script>

<style scoped lang="less">
.consumables-service {
  padding: 16rpx 32rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 2;
  gap: 16rpx;
  .good-box {
    height: 526rpx;
    box-sizing: border-box;
    background-color: #ffffff;
    padding-bottom: 24rpx;
    box-shadow: 4px 6px 10px 0px rgba(0, 0, 0, 0.05);
    .good-img {
      width: 100%;
      height: 352rpx;
    }
    .good-name {
      height: 100rpx;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 40rpx;
      color: #333333;
      padding: 16rpx 20rpx 24rpx 18rpx;
      box-sizing: border-box;
      word-break: break-all;
      overflow: hidden; //溢出内容隐藏
      text-overflow: ellipsis; //文本溢出部分用省略号表示
      display: -webkit-box; //特别显示模式
      -webkit-line-clamp: 2; //行数
      line-clamp: 2;
      -webkit-box-orient: vertical; //盒子中内容竖直排列
    }
    .good-cont {
      padding: 0 16rpx;
      .good-now-price {
        height: 44rpx;
        display: inline-block;
        font-weight: 600;
        color: #000000;
        position: relative;
        .icon {
          font-size: 20rpx;
          line-height: 28rpx;
          position: absolute;
          top: 10rpx;
          left: 0;
        }
        .now-price {
          padding-left: 20rpx;
          font-size: 32rpx;
          line-height: 44rpx;
        }
      }
      .good-pre-price {
        height: 44rpx;
        line-height: 44rpx;
        display: inline-block;
        font-weight: 400;
        font-size: 20rpx;
        color: #000000;
        opacity: 0.4;
        margin-left: 16rpx;
        text-decoration: line-through;
        text {
          padding-right: 8rpx;
        }
      }
    }
  }
}
</style>
